<template>
  <section class="content">
    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">筛选查询</h3>
      </div>
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <div class="col-sm-6">
              <div class="row">
                <label class="col-sm-2 control-label">物流商名称：</label>

                <div class="col-sm-5">
                  <input type="text" class="form-control" placeholder="请输入物流商名称">
                </div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-6">
              <div class="row">
                <label class="col-sm-2 control-label">授权状态：</label>
                <div class="col-sm-5">
                  <button type="button" class="btn btn-info btn-flat m-r-10">全部</button>
                  <button type="button" class="btn btn-default btn-flat m-r-10">已授权</button>
                  <button type="button" class="btn btn-default btn-flat m-r-10">未授权</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="box box-info">
          <div class="box-header with-border">
            <h3 class="box-title">数据列表</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <TreeGrid
              :items='data'
              :columns='columns'
              @on-row-click='rowClick'
              @on-selection-change='selectionClick'
              @on-sort-change='sortClick'
            ></TreeGrid>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->

      </div>
      <!-- /.col -->
    </div>
  </section>
</template>

<script>
  import TreeGrid from '@/components/common/TreeGrid'

  export default {
    name: "LogisticsBusinessAuthorization",
    data() {
      return {
        columns: [{
          type: 'selection'
        }, {
          title: '编码',
          key: 'code',
          sortable: true
        }, {
          title: '名称',
          key: 'name'
        }, {
          title: '状态',
          key: 'status'
        }, {
          title: '备注',
          key: 'remark'
        }, {
          title: '操作',
          type: 'action',
          actions: [{
            type: 'primary',
            text: '编辑'
          }]
        }],
        data: [{
          id: '1',
          code: '0001',
          name: '测试数据1',
          status: '启用',
          remark: '测试数据测试数据'
        }, {
          id: '2',
          code: '0002',
          name: '测试数据2',
          status: '启用',
          remark: '测试数据测试数据',
          children: [{
            id: '01',
            code: '00001',
            name: '测试数据01',
            status: '启用',
            remark: '测试数据测试数据',
          }, {
            id: '02',
            code: '00002',
            name: '测试数据02',
            status: '启用',
            remark: '测试数据测试数据',
          }]
        }, {
          id: '3',
          code: '0003',
          name: '测试数据3',
          status: '启用',
          remark: '测试数据测试数据'
        }, {
          id: '4',
          code: '0004',
          name: '测试数据4',
          status: '启用',
          remark: '测试数据测试数据'
        }]
      }
    },
    components: {
      TreeGrid
    },
    methods: {
      rowClick(data, index, event) {
        console.log('当前行数据:' + data.id)
        console.log('点击行号:' + index)
        console.log('点击事件:' + event)
      },
      selectionClick(arr) {
        console.log('选中数据id数组:' + arr)
      },
      sortClick(key, type) {
        console.log('排序字段:' + key)
        console.log('排序规则:' + type)
      }
    }
  }
</script>

<style>

</style>
